<template>
  <div class="sidebar">
    <!-- 品牌标识区 -->
    <div class="brand-area">
      <el-icon :size="32" class="logo">
        <eleme />
      </el-icon>
    </div>

    <!-- 核心导航区 -->
    <div class="nav-section">
      <div v-for="item in navItems" :key="item.name" class="nav-item" :class="{ 'active': activeNav === item.name }"
        @click="handleNavClick(item)">
        <div class="nav-icon-wrapper">
          <el-icon :size="24">
            <component :is="item.icon" />
          </el-icon>
          <el-badge v-if="getBadgeCount(item.name) > 0" :value="getBadgeCount(item.name)" :max="99" class="nav-badge" />
        </div>
        <span class="tooltip">{{ item.label }}</span>
      </div>
    </div>

    <!-- 用户功能区 -->
    <div class="user-section">
      <div class="avatar-wrapper" @click="handleAvatarClick">
        <el-avatar :size="47" :src="getMessageAvatar()" />
        <div class="online-status" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useChatStore } from '@/stores/chat'
import { useFriendStore } from '@/stores/friend'
import { useUserStore } from '@/stores/counter'

// 定义事件发射
const emit = defineEmits<{
  avatarClick: []
}>()

type NavItem = {
  name: string
  icon: string
  label: string
  path: string
}

const router = useRouter()
const route = useRoute()
const chatStore = useChatStore()
const friendStore = useFriendStore()
const userStore = useUserStore()

const activeNav = ref('chat')

const getMessageAvatar = () => {
  return userStore.currentUser?.avatar || '/default-avatar.png'
}
const navItems: NavItem[] = [
  {
    name: 'chat',
    icon: 'chat-round',
    label: '消息',
    path: '/chat'
  },
  {
    name: 'contact',
    icon: 'user',
    label: '联系人',
    path: '/friend'
  },
  {
    name: 'space',
    icon: 'folder',
    label: '空间',
    path: '/space'
  }
]

// 计算未读消息数量
const totalUnreadCount = computed(() => chatStore.totalUnreadCount)

// 计算待处理好友请求数量
const pendingRequestsCount = computed(() => friendStore.pendingRequestsCount)

// 获取导航项的徽章数量
const getBadgeCount = (navName: string) => {
  switch (navName) {
    case 'chat':
      return totalUnreadCount.value
    case 'contact':
      return pendingRequestsCount.value
    default:
      return 0
  }
}

const handleNavClick = (item: NavItem) => {
  activeNav.value = item.name
  router.push(item.path)
}

// 处理头像点击
const handleAvatarClick = () => {
  emit('avatarClick')
}

// 根据当前路由更新活跃导航
const updateActiveNav = () => {
  const path = route.path
  if (path.includes('/chat')) {
    activeNav.value = 'chat'
  } else if (path.includes('/friend')) {
    activeNav.value = 'contact'
  } else if (path.includes('/space')) {
    activeNav.value = 'space'
  }
}

// 组件挂载时初始化
onMounted(() => {
  updateActiveNav()
  // 初始化用户信息
  userStore.initUser()
})
</script>

<style scoped lang="scss">
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 88px;
  background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 100%);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-lg) 0;
  transition: width var(--transition-normal);
  border-right: 1px solid var(--border-light);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.1) 0%,
        rgba(168, 85, 247, 0.05) 100%);
    pointer-events: none;
  }

  .brand-area {
    padding: 0 0 var(--spacing-xl);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;

    .logo {
      color: var(--primary-400);
      transition: var(--transition-normal);
      filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));

      &:hover {
        transform: rotate(15deg) scale(1.1);
        color: var(--primary-300);
      }
    }
  }

  .nav-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    z-index: 1;

    .nav-item {
      position: relative;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: var(--transition-normal);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .nav-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          color: var(--gray-300);
          transition: var(--transition-fast);
        }

        .nav-badge {
          position: absolute;
          top: -8px;
          right: -8px;
          z-index: 10;

          :deep(.el-badge__content) {
            background: linear-gradient(135deg, var(--error-500) 0%, #ff6b6b 100%);
            border: 2px solid var(--gray-800);
            font-size: 10px;
            font-weight: var(--font-semibold);
            min-width: 16px;
            height: 16px;
            line-height: 12px;
            padding: 0 4px;
            box-shadow: var(--shadow-md);
          }
        }
      }

      .tooltip {
        position: absolute;
        left: 72px;
        white-space: nowrap;
        background: var(--gray-900);
        color: var(--text-inverse);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-fast);
        box-shadow: var(--shadow-lg);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-light);

        &::before {
          content: '';
          position: absolute;
          left: -8px;
          top: 50%;
          transform: translateY(-50%);
          border-width: 8px 8px 8px 0;
          border-style: solid;
          border-color: transparent var(--gray-900) transparent transparent;
        }
      }

      &:hover {
        background: rgba(99, 102, 241, 0.2);
        transform: translateX(4px);
        border-color: rgba(99, 102, 241, 0.3);

        .nav-icon-wrapper .el-icon {
          color: var(--primary-300);
          transform: scale(1.1);
        }

        .tooltip {
          opacity: 1;
          visibility: visible;
        }
      }

      &.active {
        background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
        border-color: var(--primary-400);
        box-shadow: var(--shadow-lg);

        .nav-icon-wrapper .el-icon {
          color: var(--text-inverse);
        }
      }
    }
  }

  .user-section {
    padding: var(--spacing-lg) 0 0;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;

    .avatar-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--primary-400);
      border-radius: var(--radius-xl);
      padding: 2px;
      background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
      transition: var(--transition-normal);
      cursor: pointer;

      &:hover {
        transform: scale(1.05);
        border-color: var(--primary-300);
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
      }

      .online-status {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 12px;
        height: 12px;
        background: var(--success-500);
        border-radius: var(--radius-full);
        border: 2px solid var(--gray-800);
        box-shadow: var(--shadow-sm);
      }
    }
  }
}
</style>
